import React from 'react';
import Echarts from 'echarts-for-react';
import {Spin, Card, Empty} from 'antd';
import {mergeEchartsOption} from '../../common/utils';

const OrderOfflineChartCard = props => {
    const {data = {}, loading, dashBoard = {}, unitId} = props;

    const dashBoardId = dashBoard?.dashBoardId;
    const unit = dashBoardId ? data?.[dashBoardId]?.[unitId] : {};
    const {chart, unitName = ''} = unit || {};

    if (chart) {
        const tooltipCallback = (params = []) => {
            const tooltipList = params.map((chartItem, index) => {
                const {marker, name, seriesName, value} = chartItem;
                let result = '';
                if (index === 0) {
                    result = `${name}<br/>${marker}${seriesName}: ${value}`;
                } else {
                    result = `<br/>${marker}${seriesName}: ${value}`;
                }
                return result;
            });
            return tooltipList.join('');
        };
        const extendOptions = {
            chartId: 'OrderOfflineLineChart',
            tooltip: {
                trigger: 'axis',
                // axisPointer: {
                //     type: 'cross'
                // },
                formatter: tooltipCallback
            },
            dataZoom: [
                {
                    type: 'inside'
                },
                {
                    type: 'slider'
                }
            ],
            yAxis: {
                common: {
                    splitLine: {show: false}
                }
            },
            legend: {
                // orient: 'vertical',
                // left: 'right'
            },
            grid: {
                left: 30,
                right: 30,
                bottom: 40,
                containLabel: true
            },
        };
        const options = mergeEchartsOption(chart, extendOptions);
        return (
            <Card
                title={unitName}
                className="order-offline-chart-card"
            >
                <Spin spinning={loading}>
                    <Echarts option={options} notMerge />
                </Spin>
            </Card>
        );
    }

    return (
        <Card
            title={unitName || '订单离线数据下单数'}
            className="order-offline-chart-card"
        >
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
        </Card>
    );
};

export default OrderOfflineChartCard;
